import React, { lazy, Suspense } from 'react'
import { Redirect } from 'react-router-dom'
import SkeletonLoading from '@/components/SkeletonLoading'

// page
const TouchBattle = lazy(() => import(/* webpackChunkName: "index" */ '@/pages/TouchBattle'))

const suspenseComponent =
  (Component, skeletonId = '') =>
  (props) =>
    (
      <Suspense fallback={<SkeletonLoading skeletonId={skeletonId} />}>
        <Component {...props} />
      </Suspense>
    )

const routes = [
  {
    path: '/',
    exact: true,
    render: () => <Redirect to={'/touch-battle'} />,
  },
  {
    path: '/touch-battle',
    component: suspenseComponent(TouchBattle),
  }
]

export default routes
